import React, { useEffect, useState } from "react";
import { Input, Button, Table, Modal, message } from "antd";
import styles from "./index.less";
import api from "../../../services/addMessageApi";

const ScenesSelect = props => {
  const {
    scenesOfSelected: listOfSelectedScenes,
    onCheck: setlistOfSelectedScenes,
    onClose,
    visible
  } = props;
  const [listOfScenes, setlistOfScenes] = useState([]);
  const [loading, setLoading] = useState(false);
  const [sceneCodeOrSceneName, setsceneCodeOrSceneName] = useState();
  const [pageNum, setpageNum] = useState(1);
  const [pageSize, setpageSize] = useState(5);
  const [total, settotal] = useState(0);

  useEffect(() => {
    onSearch();
  }, [pageNum, pageSize]);

  // 查询角色
  function onSearch() {
    const params = {
      BaseMessageSourceQuery: {
        pageNum,
        pageSize,
        isEnabled: "Y",
        sceneCodeOrSceneName
      }
    };
    setLoading(true);
    api.getnoSpecifiedlist(params).then(res => {
      if (res.success) {
        setlistOfScenes(res.datas);
        settotal(res.totalCount);
      } else {
        message.error(res.errMsg);
      }
      setLoading(false);
    });
  }
  // 表格页码变化
  const onPageChange = (cur, size) => {
    setpageNum(cur);
    setpageSize(size);
  };
  // 子组织表格column
  const sceneColumn = [
    {
      title: "消息源编码",
      dataIndex: "sourceCode"
    },
    {
      title: "消息源名称",
      dataIndex: "sourceName"
    },
    {
      title: "场景编码",
      dataIndex: "sceneCode"
    },
    {
      title: "场景名称",
      dataIndex: "sceneName"
    }
  ];
  // 表格check配置
  const rowSelection = {
    selectedRowKeys: listOfSelectedScenes.map(o => o.sceneCode),
    onSelect: (record, selected) => {
      if (selected) {
        setlistOfSelectedScenes([record]);
      } else {
        setlistOfSelectedScenes(
          []
          // listOfSelectedScenes.filter(o => o.sceneCode !== record.sceneCode)
        );
      }
    },
    type: "radio",
    hideDefaultSelections: true // 去掉全选
    // onSelectAll: selected => {
    //   if (selected) {
    //     // 记录当前表格新增的record
    //     const newRec = [];
    //     listOfScenes.forEach(l => {
    //       if (!listOfSelectedScenes.find(ls => ls.sceneCode === l.sceneCode)) {
    //         newRec.push(l);
    //       }
    //     });
    //     setlistOfSelectedScenes(listOfSelectedScenes.concat(newRec));
    //   } else {
    //     // 删除已选择数据中心包含当前表格数据的记录
    //     setlistOfSelectedScenes(
    //       listOfSelectedScenes.filter(
    //         o => !listOfScenes.some(l => l.sceneCode === o.sceneCode)
    //       )
    //     );
    // }
    // }
  };

  return (
    <Modal
      title="选择消息场景"
      visible={visible}
      onCancel={onClose}
      wrapClassName={styles.modalCls}
      footer={[
        <Button key="ok" type="primary" onClick={onClose}>
          确认
        </Button>
      ]}
    >
      <div className={styles.root}>
        <div className={styles.searchBox}>
          <div className={styles.select}>
            <Input
              placeholder="场景编码或名称"
              allowClear
              style={{ width: 200 }}
              onChange={e => setsceneCodeOrSceneName(e.target.value)}
            />
          </div>
          <Button
            loading={loading}
            icon="search"
            type="primary"
            onClick={onSearch}
          >
            查询
          </Button>
        </div>
        <div className={styles.menuTable}>
          <Table
            rowKey="sceneCode"
            columns={sceneColumn}
            dataSource={listOfScenes}
            rowSelection={rowSelection}
            pagination={{
              pageSize,
              current: pageNum,
              total,
              onChange: onPageChange
            }}
            loading={loading}
          />
        </div>
      </div>
    </Modal>
  );
};

export default ScenesSelect;
